<script setup lang="ts">
import { onMounted } from 'vue';
import { navigateTo, reLaunch } from '@tarojs/taro';
import { QUERY_APP_FLOW_PATH_RECORD_LIST } from '/@/api/modules/flow-path/flow-path';
import { APPROVE_STATUE, APPROVE_STATUE_COLOR, APPROVE_STATUE_BG_COLOR } from '/@/common/constant';
import { state } from './state';
/**
 * @description 跳转到详情页面
 * @param item 点击的item项
 */
function jumpToDetailPage(item: FlowPathDto.RecordDto) {
  navigateTo({
    url: `/pages/my-approve/detail/index?id=${item.id}&from=send`,
  });
}

/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  QUERY_APP_FLOW_PATH_RECORD_LIST({
    comQuery: { page, pageSize },
    flowpathRecordDto: { templateCode: 'c1b9a7f9-e48e-41b1-80eb-7a028dc453d2' },
    myHandleStatus: '3',
  })
    .then((res) => {
      state.loading = false;
      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      ) {
        state.finished = true;
      }
      if (!res.flowpathRecordDto || !res.flowpathRecordDto.length) return;
      res.flowpathRecordDto.forEach((item) => state.list.push(item));
      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
});
</script>

<template>
  <view class="archive-borrow-record app-page--1">
    <app-navbar title="档案借阅" />
    <nut-tabs
      model-value="record"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'list') {
            reLaunch({ url: '/pages/archive-borrow/list/index' });
          }
        }
      "
    >
      <nut-tab-pane title="档案借阅" pane-key="list" />
      <nut-tab-pane title="借阅记录" pane-key="record" />
    </nut-tabs>
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="archive-borrow-record__wrapper">
        <view
          class="archive-borrow-record-item"
          v-for="item in state.list"
          :key="item.id || ''"
          @click="jumpToDetailPage(item)"
        >
          <view class="archive-borrow-record-item__header">
            <view class="archive-borrow-record-item__header--left">
              <text>{{ item.title || '-' }}</text>
            </view>
            <view
              class="archive-borrow-record-item__header--right"
              :style="{
                color: item.status ? APPROVE_STATUE_COLOR[item.status] : '#999',
                backgroundColor: item.status ? APPROVE_STATUE_BG_COLOR[item.status] : '#999',
              }"
            >
              <text>{{ item.status ? APPROVE_STATUE[item.status] : '-' }}</text>
            </view>
          </view>
          <view v-for="attribute in item.attributes" :key="attribute.id">
            <text>{{ attribute.attributeName }}:&nbsp;&nbsp;</text>
            <text>{{ attribute.attributeValue }}</text>
          </view>
        </view>

        <view class="app-page__list-tips">
          <text v-if="!state.list.length">暂无数据！</text>
          <text v-else-if="state.list.length && state.loading">加载中...</text>
          <text v-else-if="state.list.length && state.finished">加载完成!</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
